<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="no-referrer" />
    <title>源辰租房</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
    <link rel="shortcut icon" href="images/icon/favicon.ico">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/nprogress.js"></script>
    <script src="js/jquery.lazyload.min.js"></script>

    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/element-china-area-data@6.0.0/dist/element-china-area-data.iife.js"></script>
    <script src="js/login.js"></script>
    <script src="js/tenant.js"></script>
    <style>
        #content{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 40px;
        }
        .div-border.items-list {
            padding: 7px 10px 0;
            position: relative;
            z-index: 1;
        }
        .div-border {
            border: 1px solid #e6e6e6;
            width: 100%;
        }
        .div-border .items {
            border-bottom: 1px dotted #e6e6e6;
            font-size: 13px;
            line-height: 30px;
            padding: 4px 10px;
        }
        .div-border .items .item-title {
            *zoom: 1;
            color: #999;
            display: inline-block;
            *display: inline;
            float: left;
            margin-right: 15px;
            vertical-align: top;
        }
        .bg-light-blue{
            color: #f60;
            font-weight: 700;
        }
        .widget_hot li a,.widget_hot .thumbnail,.widget_hot .thumbnail{
            margin: 0px;
            padding: 0px;
        }
        .widget_hot .thumbnail img {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
        }
        .detail-info {
            font-weight: 400;
            padding: 8px 10px;
        }
        .detail-info .house-title {
            color: #333;
            margin-top: 180px
        }
        .detail-info .house-type {
             color: #888;
        }
        .detail-info .price {
            color: #ff552e;
            font-size: 14px;
        }
        .nav-tabs>li {
            width: 50%;
        }
        .pl{
            font-size: 18px;
            text-align: center;
            margin: 10px;
            color: #999;
        }
        html,body,#app{
            height: 100%;
            overflow: auto;
        }
        html,body{
            overflow: hidden;
        }
        .excerpt header {
            width: 500px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
    <script>
        function regionChick(target){
            $.each($(".regionChick"), function() {
                $(this).removeClass("bg-light-blue");
            });
            $(target).addClass("bg-light-blue");
        }
        function rentChick(target){
            $.each($(".rentChick"), function() {
                $(this).removeClass("bg-light-blue");
            });
            $(target).addClass("bg-light-blue");
        }
        function roomChick(target){
            $.each($(".roomChick"), function() {
                $(this).removeClass("bg-light-blue");
            });
            $(target).addClass("bg-light-blue");
        }
        function typeChick(target){
            $.each($(".typeChick"), function() {
                $(this).removeClass("bg-light-blue");
            });
            $(target).addClass("bg-light-blue");
        }
    </script>
</head>
<body class="user-select">
<div id="app" v-infinite-scroll="load"
     :infinite-scroll-distance="100" infinite-scroll-delay="1000">
    <mymain @logined="onlogin">
        <div class="content-wrap">
            <div class="content">
                <div class="jumbotron">
                    <h1>欢迎访问源辰租房</h1>
                </div>
                <el-row>
                    <el-col :span="10" style="margin-bottom: 20px">
                        <el-select v-model="province" placeholder="请选择" @change="option()">
                            <el-option
                                    v-for="item in pcaTextArr"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    :change="getAreaData(item)">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="10" style="margin-bottom: 20px">
                        <el-select v-model="city" placeholder="请选择" @change="option()">
                            <el-option
                                    v-for="it in cityList"
                                    :key="it.value"
                                    :label="it.label"
                                    :value="it.value"
                            >
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <div class="div-border items-list">
                    <div class="items" style="display: flex">
                        <div>
                            <span class="item-title" style="width: 40px">区域：</span>
                        </div>
                        <div>
                            <span class="elems-l">
                            <a class="regionChick bg-light-blue" style="margin-right: 15px" onclick="regionChick(this)" @click="selectRegion('全部')">
                                全部
                            </a>
                            <a v-for="r in regionList" class="regionChick" style="margin-right: 15px" onclick="regionChick(this)" @click="selectRegion(r.value)">
                                {{r.value}}
                            </a>
                        </span>
                        </div>
                    </div>
                    <div class="items">
                        <span class="item-title" style="height: 50px">租金：</span>
                        <a class="rentChick bg-light-blue" style="margin-right: 15px" onclick="rentChick(this)" @click="selectRent('全部')">
                            全部
                        </a>
                        <span class="elems-l">
                            <a v-for="r in rentList" class="rentChick" style="margin-right: 15px" onclick="rentChick(this)" @click="selectRent(r)">
                                {{r}}
                            </a>
                        </span>
                    </div>
                    <div class="items">
                        <span class="item-title">房型：</span>
                        <a class="roomChick bg-light-blue" style="margin-right: 15px" onclick="roomChick(this)" @click="selectRoom('全部')">
                            全部
                        </a>
                        <span class="elems-l">
                            <a v-for="r in roomList" class="roomChick" style="margin-right: 15px" onclick="roomChick(this)" @click="selectRoom(r)">
                                {{r}}
                            </a>
                        </span>
                    </div>
                    <div class="items">
                        <span class="item-title">类型：</span>
                        <a class="typeChick bg-light-blue" style="margin-right: 15px" onclick="typeChick(this)" @click="selectType('全部')">
                            全部
                        </a>
                        <span class="elems-l">
                            <a v-for="t in typeList" class="typeChick" style="margin-right: 15px" onclick="typeChick(this)" @click="selectType(t)">
                                {{t}}
                            </a>
                        </span>
                    </div>
                </div>
                <div class="title">
                    <h3 style="margin-top: 20px">最新发布</h3>
                </div>
                <article class="excerpt excerpt-1" style="height: 180px;" v-for="h in houseList" >
                    <a @click="goHouseDetails(h.id,h.masterId)" class="focus" title="">
                        <img class="thumb" :src="h.image" alt="">
                    </a>
                    <header><a class="cat" href="program">{{h.type}}<i></i></a>
                        <h2><a @click="goHouseDetails(h.id,h.masterId)" title="" style="font-weight: 400; font-size: 20px">{{h.introduce}}</a></h2>
                    </header>
                    <div style="display: flex;">
                        <p class="meta">
                            <span class="time"> {{h.scale}}</span>
                            <span class="views"> {{h.area}}m²</span><br><br>
                            <span class="views"> {{h.address}}</span><br><br>
                            <span class="views"> 来自经纪人</span>
                        </p>
                        <p class="meta" style="margin: auto;font-size: 28px;color: red;font-weight: 400;float: right;">
                            <span style="margin-left: 200px;"> {{h.price}}元/月</span>
                        </p>
                    </div>
                </article>
                <p class="pl" v-if="loading">加载中...</p>
                <p class="pl" v-if="noMore">没有更多了</p>
<!--                <div id="pagination">-->
<!--                    <a href="?" class="next">next</a>-->
<!--                </div>-->
            </div>
        </div>
        <aside class="sidebar" >
            <div class="fixed">
                <div class="widget widget-tabs" style="border: 1px solid #e6e6e6;">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#notice" aria-controls="notice" role="tab" data-toggle="tab">网站公告</a></li>
                        <li role="presentation"><a href="#contact" aria-controls="contact" role="tab" data-toggle="tab">联系站长</a></li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane notice active" id="notice">
                            <ul>
                                <li>
                                    <time datetime="2016-01-04">01-04</time>
                                    <a href="" target="_blank">欢迎访问源辰租房</a></li>
                            </ul>
                        </div>
                        <div role="tabpanel" class="tab-pane contact" id="contact">
                            <h2>Email:<br />
                                <a href="mailto:admin@ylsat.com" data-toggle="tooltip" data-placement="bottom" title="admin@ylsat.com">1405046251@qq.com</a></h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="widget widget_hot" style="border: 0px">
                <p style="font-size: 18px; margin-bottom: 10px">热推房源</p>
                <ul>
                    <li style="border: 1px solid #eaeaea; margin-bottom: 20px;" v-for="i in recommendList.slice(1,4)" >
                        <a href="" @click.prevent="goHouseDetails(i.id, i.masterId)"  style="width: 100%; height: 180px; display: inline;">
                            <div class="thumbnail" style="width: 100%; height: 180px">
                                <img class="thumb" :src="i.imgUrls[0]" alt="">
                            </div>
                            <div class="detail-info">
                                <p class="house-title">{{i.address}}</p>
                                <div class="house-type">{{i.scale}}  {{i.area}}平</div>
                                <div class="price">{{i.price}}元/月</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </aside>
    </mymain>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            user: {},
            visible: false,
            pcaTextArr: elementChinaAreaData.pcaTextArr,
            province: "北京市",
            cityList: [],
            city: "市辖区",
            regionList: [],
            rentList: ["1000元以下","1000-1500元","1500-2000元","2000-2500元","2500-3000元",
                "3000-4000元","4000-5000元","5000-6000元","6000-8000元","8000-15000元","15000元以上"],
            roomList: ["一室","二室","三室","四室","五室及以上"],
            typeList: ["整租","合租"],
            houseList: [],
            recommendList: [],
            region: "全部",
            rent: "全部",
            room: "全部",
            type: "全部",
            currentPage: 1,
            size: 2,
            loading: false,
            noMore: false,
        },
        created(){
            this.onlogin();
            this.onUser();
        },
        methods:{
            onlogin(user){
                console.log(user);
                this.user = user;

            },
            onUser(){
                setTimeout(()=>{
                    this.select();
                },500)
            },
            // 根据省市 获取该省市中所有地区
            getAreaData(item){
                if(item.value == this.province){
                    this.cityList = item.children;
                    for (let i = 0; i < item.children.length; i++) {
                        if (item.children[i].value == this.city){
                            this.regionList = item.children[i].children;
                            return;
                        } else if (i == item.children.length-1) {
                            this.city = item.children[0].value;
                        }
                    }
                }
            },
            init(){
                this.noMore = false;
                this.houseList = [];
                this.currentPage = 1;
                this.size = 4;
            },
            option(){
              this.init();
              this.select();
            },
            selectRegion(region){
                this.init();
                this.region = region;
                this.select();
            },
            selectRent(rent){
                this.init();
                this.rent = rent;
                this.select();
            },
            selectRoom(room){
                this.init();
                this.room = room;
                this.select();
            },
            selectType(type){
                this.init();
                this.type = type;
                this.select();
            },
            select(){
                let params = new URLSearchParams();
                params.append("page", this.currentPage);
                params.append("size", this.size);
                params.append("province", this.province);
                params.append("city", this.city);
                params.append("region", this.region);
                params.append("rent", this.rent);
                params.append("room", this.room);
                params.append("type", this.type);
                axios.post("house/select",params).then(res=>{
                    this.houseList = this.houseList.concat(res.data);
                    console.log("houseList长度为："+this.houseList.length);
                    this.getMaster();
                    if (res.data.length < this.size){
                        this.noMore = true;
                    }
                });
                axios.post("house/get").then(res=>{
                    this.recommendList=res.data;
                });
            },
            getMaster(){
                for (let i = 0; i < this.houseList.length; i++) {
                    axios.post("/TN-USER/user/master?masterId="+this.houseList[i].masterId).then(res=>{
                        this.houseList[i].user = res.data;
                    })
                }
            },
            load () {
                if(this.noMore == false){
                    this.size = 2;
                    this.loading = true;
                    if (this.currentPage==1){
                        this.currentPage=2;
                    }
                    this.currentPage += 1;
                    setTimeout(() => {
                        this.loading = false
                    }, 1000)
                    this.select();
                }
            },
            goHouseDetails(houseId, masterId){
                localStorage.setItem("houseId",houseId);
                localStorage.setItem("masterId",masterId);
                location.href = "houseDetails.html";
            },
        },
    });
</script>

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ias.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>